<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>创建点位</div>
        <span class="img_jia1" @click="bj($event)">{{title_bj}}</span>
        <img src="../../assets/images/01_05.png" alt="" class="img_jia" @click="toAdd">
      </div>
    </header>
    <div class="main top">
      <div class="tjb">
        <table class="t1">
          <thead class="table_hj">
            <tr>
              <td>序号</td>
              <td colspan="4">巡查名称</td>
              <td colspan="3">点位数</td>
              <td class="bj_thead isShow"></td>
            </tr>
          </thead>
          <tbody class="tbody table1" @click="through(item)" v-for="(item, index) in list" :key="index">
            <tr>
              <td rowspan="3">{{item.xh}}</td>
              <td colspan="4">{{item.title}}</td>
              <td colspan="3">{{item.dianwei}}</td>
              <td rowspan="3" class="bj_td" v-show="tbale_bj_show">
                <div class="img_bj" @click.stop="list_bj(item,index)">
                  <img src="../../assets/images/dwxc/table_bj.png" alt="">
                </div>
              </td>
            </tr>
            <tr>
              <td :class="{'active':item1.IsChoose != 0}" v-for="(item1, index1) in item.dataList" :key="index1">{{item1.mc}}</td>
              <!-- <td>周二</td>
              <td>周三</td>
              <td>周四</td>
              <td>周五</td>
              <td>周六</td>
              <td>周七</td> -->
            </tr>
            <tr>
              <td colspan="7"  v-if="item1.IsChoose !=0 " v-for="(item1, index1) in item.dataList" :key="index1" >
                开始时间：{{item1.beginTime}}-{{item1.endTime}}&emsp;结束时间：{{item1.beginTime1}}-{{item1.endTime1}}
              </td>
            </tr>
          </tbody>
          <!-- <tbody class="tbody table1" @click="through">
            <tr>
              <td rowspan="3">1</td>
              <td colspan="4">华文新街-新华路-中华路</td>
              <td colspan="3">1</td>
              <td rowspan="3" class="bj_td" v-show="tbale_bj_show">
                <div class="img_bj">
                  <img src="../../assets/images/dwxc/table_bj.png" alt="" @click.stop="list_bj">
                </div>
              </td>
            </tr>
            <tr>
              <td class="active">周一</td>
              <td>周二</td>
              <td>周三</td>
              <td>周四</td>
              <td>周五</td>
              <td>周六</td>
              <td>周七</td>
            </tr>
            <tr>
              <td colspan="7">9:00-12:00</td>
            </tr>
          </tbody> -->
        </table>
      </div>
    </div>

  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'dwxc_1_calendar',
    data() {
      return {
        tbale_bj_show: false,//是否显示表格编辑
        list:[],
        userid:null,
        title_bj:"编辑"
      }
    },
    mounted() {
      var _this = this;
    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      //  返回
      back() {
        // this.$router.push("/dwxc_1_calendar");
        this.$router.back()
      },
      bj(e) {//编辑
        if ($(e.target).text() == "编辑") {
          this.tbale_bj_show = true
          this.title_bj="完成"
        } else if ($(e.target).text() == "完成") {
         this.title_bj="编辑"
          this.tbale_bj_show = false
        }
      },
      through(item) {//穿透
        var data={
          'name':item.title,
          'dataid':item.dataid
        }
        sessionStorage.setItem("dwxc_2_Pointcreation_scroll", $(".main").scrollTop())
        sessionStorage.setItem("dwxc_3_data",JSON.stringify(data))
        this.$router.push("/dwxc_3_Pointline");
      },
      toAdd() {
        this.$router.push("/dwxc_6");
      },
      list_bj(item,index) {
        localStorage.setItem("dwxc_bj_id",item.dataid);
        localStorage.setItem("dwxc_bj_index",index);
        this.$router.push("/dwxc_6_xg");
      },
      inof() {//获取列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params={
          dwId:this.userid,
          pageNumber:1,
          pageRows:10000
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getSpotInspectionList`,qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log(res);
            if (res.data.code == 200) {
              this.list=res.data.rows
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err=>{
              this.$terminal._error(err)
          })
      },
      update(){
        var list_update = localStorage.getItem("list_update")?JSON.parse(localStorage.getItem("list_update")):null;
        if(list_update){
          var index = localStorage.getItem("dwxc_bj_index");
          if(this.list&&this.list[index]){
            this.list[index].title = list_update.title;
            this.list[index].dianwei = list_update.dianwei;
            for(var n=0;n<this.list[index].dataList.length;n++){
              this.list[index].dataList[n].IsChoose = 0;
            }
            for(var n=0;n<this.list[index].dataList.length;n++){
              list_update.dataList.forEach(v=>{
                if(v==this.list[index].dataList[n].mc){
                  this.list[index].dataList[n].IsChoose = 1;
                  this.list[index].dataList[n].beginTime = list_update.time1;
                  this.list[index].dataList[n].endTime = list_update.time2;
                  this.list[index].dataList[n].beginTime1 = list_update.time3;
                  this.list[index].dataList[n].endTime1 = list_update.time4;
                }
              });
            }
          }
          this.$forceUpdate();
        }
        localStorage.removeItem("list_update");
        localStorage.removeItem("dwxc_bj_index");
      }


    },
    created() {

      // console.log(6 % 7)
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        console.log(to)
        console.log(from)
        if(from.path=="/dwxc_1_calendar" || from.path=="/dwxc_6"){
          vm.userid=localStorage.getItem("userId")
          vm.tbale_bj_show = false
          vm.title_bj="编辑"
          vm.inof(); //检查当前app版本是否需要更新
          console.log(111)
        }else{
          $(".main").animate(
          { scrollTop: sessionStorage.getItem("dwxc_2_Pointcreation_scroll") },
          0
        );
        }
        vm.update();
      });
    },

  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
    position: fixed;
    top: 0;
    left: 0;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    width: 0.629629rem;
    height: 0.629629rem;
    position: absolute;
    right: 0.3704rem;
  }

  .img_jia1 {
    /* width: 0.629629rem;
    height: 0.629629rem; */
    position: absolute;
    right: 1.5556rem;
    font-size: 0.3889rem;
  }

  /*  */
  /*  */
  .main {
    padding: 0.2778rem;
  }

  .top {
    margin-top: 1.8519rem;
  }

  .tjb {
    /* background: #7ac0fe; */
    border-radius: 0.2778rem;
  }

  .item {
    height: 1.2963rem;
    line-height: 1.2963rem;
    font-size: 0.481481rem;
    /* font-weight: 600; */
    text-align: center;
    /* border: 1px solid #A1A0A1; */
    border-bottom: none;
    color: #FFF;

  }


  .t1 {
    width: 100%;
    border-collapse: collapse;
  }

  .table_hj td {
    border: 1Px solid #fff;
    height: 1.1111rem;
    font-size: 0.3333rem;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    /* font-weight: 600; */
  }

  .table_hj td:nth-child(1) {
    width: 1.1111rem;
  }


  .table1 {
    border-bottom: 2Px solid #fff;
  }

  .active {
    background-color: #2C61FE !important;
  }

  .table1 td {
    border: 1Px solid #fff;
    height: 1.1111rem;
    font-size: 0.3333rem;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    width: 1.2037rem;
    background: #7ac0fe;
  }

  .table_hj td {
    background: #7ac0fe;
  }

  .shijian {
    padding: 0 0.3704rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .shijian>span {
    font-size: 0.3333rem;
    height: 0.4259rem;
  }

  .isShow {
    display: none;
  }

  .table_hj td.bj_thead {
    border: none;
    background: none;

  }

  .table1 td.bj_td {
    background: #EDEDED;
    width: 0.8333rem;
  }

  .img_bj {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .img_bj img {
    width: 0.4444rem;
    height: 0.4444rem;
  }
  .tbody >tr:last-child > td:not(:first-child){
    display: none;
  }
</style>
